<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Đồng hồ đếm ngược</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type="text/javascript" src="http://tools.mybloggertricks.com/mbt-popup.js"></script>
            <script type='text/javascript'>
                //<![CDATA[
                //Setting Time
                TargetDate = "1/1/2016 12:00 AM";
                CountActive = true;
                CountStepper = -1;
                LeadingZero = true;
                DisplayFormat = "%%D%% Ngày: %%H%% Giờ: %%M%% Phút: %%S%% Giây";
                FinishMessage = "It is finally here!";
                //Hiding snowfall
                $(document).ready(function()
                            {               
                $('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});
           
            //Setting cookie               
                    if(sessionStorage.getItem("Hide-MBT-Popup") == 1) {
                    $(document).snowfall('clear');
                    $(document).snowfall.hide();
                    $("#myModal").hide();
                   
                    }
                    sessionStorage.setItem("Hide-MBT-Popup", 1);
                                       });
                           
                            $(function() {
               
                // Setting Animation           
                 $('#myModal').reveal({
                     animation: 'fadeAndPop',                   //fade, fadeAndPop, none
                     animationspeed: 300,                       //how fast animtions are
                     closeonbackgroundclick: false,              //if you click background will modal close?
                     dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
                });
               
                //Revealing Snowfall
                $(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8,  flakeCount : 250});
               
                });
               
                //]]>
            </script>
            <link href='http://fonts.googleapis.com/css?family=Arial' rel='stylesheet' type='text/css'/>
            
</head>

<body>
<style>
#mbt-counter {
        padding: 10px;
        font-family: oswald, verdana;
        background-color: rgba(0, 0, 0, 0)!important;
        color: #FFF!important;
        position: absolute;
        left: 49%;
        top: 10%;
        font-size: 15px;
}


        .reveal-modal h2 {
        position: absolute;
top: 5%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FF9D0F;
left: 4%;
}

   
    .reveal-modal-bg {
        position: fixed;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,.8);
        z-index: 100;
        display: none;
        top: 0;
        left: 0;
        }
   
    .reveal-modal {
        visibility: hidden;
        left: 50%;
        top:170px;
        margin-left: -300px;
        width: 550px;
        height: 305px;
        background: rgba(51, 51, 51, 0) url(http://i.vimeocdn.com/video/497620299_640.jpg) no-repeat -17px 0px;
        position: absolute;
        z-index: 101;
        padding: 30px 40px 34px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        color: #FFF;
        }
       
    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium         { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge         { width: 800px; margin-left: -440px;}
   
    .reveal-modal .close-reveal-modal {
        font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: #9C6417;
        }
       
        .reveal-modal .close-reveal-modal:hover {
            color:#2d2d2f;
        } 
</style>
<div id="myModal" class="reveal-modal" >
  <h2>Thời gian còn lại!</h2>
    <script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
   <a class="close-reveal-modal">&#215;</a>
</div>
</body>
</html>
